<template>
  <div>
    <router-view>
      <div>
        <!-- 标签页 -->
        <el-tabs type="border-card" @tab-click="tab_value">
          <!-- 体检套餐 -->
          <el-tab-pane label="体检套餐">
            <div style="height: 2vh"></div>
            <el-card class="box-card">
              <template #header>
                <div style="font-size: 20px; font-weight: 600">
                  <span>体检套餐</span>
                </div>
                <div style="height: 2vh"></div>
                <div style="display: flex; align-items: center">
                  <div style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                    <div class="left">
                      <el-input v-model="input" placeholder="输入套餐名称"  clearable style="width: 150px" @input="searchData" />
                      <div style="width: 8px"></div>
                      <!-- <el-button style="margin: 10px" type="primary" @click="searchData()">搜索</el-button> -->
                    </div>
                    <div class="right">
                      <el-button style="margin: 10px" type="danger" @click="deleteAllOne">批量删除</el-button>
                      <el-button style="margin: 10px" type="primary" @click="addOne">新增套餐</el-button>
                    </div>
                  </div>
                </div>
              </template>
              <div>
                <el-table ref="tableOne" style="width: 100%" stripe
                  :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" v-loading="loading"
                  max-height="52vh">
                  <el-table-column type="selection" width="55" align="center" fixed />
                  <el-table-column label="套餐ID" property="id" align="center" fixed />
                  <el-table-column label="套餐名称" property="name" width="320" align="center" fixed />
                  <el-table-column property="card" label="套餐图片" width="320" align="center">
                    <template #default="scope">
                      <el-image :src="url + scope.row.img" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="[url + scope.row.img]" fit="cover" preview-teleported="true"
                        style="width: 75px; height: 75px" />
                    </template>
                  </el-table-column>
                  <el-table-column property="price" label="套餐价格" show-overflow-tooltip width="240" align="center" />
                  <el-table-column property="status" label="状态" show-overflow-tooltip width="220" align="center">
                    <template #default="scope">
                      <el-switch :value="scope.row.type === 1" @click="affirmSwitch(scope.row)" />
                    </template>
                  </el-table-column>
                  <!-- <el-table-column property="content" label="套餐介绍" align="center">
                    <template #default="scope">
                      <el-tooltip class="box-item" effect="dark" :content="scope.row.parsedDetails" placement="top">
                        <div v-html="scope.row.content" class="listed"></div>
                      </el-tooltip>
                    </template>
                  </el-table-column> -->
                  <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template #default="scope">
                      <div style="display: flex; align-items: center; justify-content: center">
                        <el-button type="primary" plain size="small"
                          @click="handleEditOne(scope.row.id, scope.row)">编辑</el-button>
                        <el-button type="danger" plain size="small"
                          @click="deleteOne(scope.$index, scope.row)">删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="height: 1vh"></div>
                <div style="display: flex; justify-content: center">
                  <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <!-- 体检项目 -->
          <el-tab-pane label="体检项目">
            <div style="height: 2vh"></div>
            <el-card class="box-card">
              <template #header>
                <div style="font-size: 20px; font-weight: 600">
                  <span>体验项目</span>
                </div>
                <div style="height: 2vh"></div>
                <div style="display: flex; align-items: center">
                  <div style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                    <div class="left">
                      <el-input v-model="input" placeholder="输入项目名称" clearable style="width: 150px" @input="searchData" />
                      <div style="width: 8px"></div>
                      <!-- <el-button style="margin: 10px" type="primary" @click="searchData()">搜索</el-button> -->
                    </div>
                    <div class="right">
                      <el-button style="margin: 10px" type="danger" @click="deleteAllTwo">批量删除</el-button>
                      <el-button style="margin: 10px" type="primary" @click="addTwo">新增项目</el-button>
                    </div>
                  </div>
                </div>
              </template>
              <div>
                <el-table ref="tableTwo" style="width: 100%" stripe
                  :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" v-loading="loading"
                  max-height="50vh">
                  <el-table-column type="selection" width="55" align="center" fixed />
                  <el-table-column label="项目ID" property="id" align="center" fixed />
                  <el-table-column label="套餐名称" property="name" width="220" align="center" fixed />
                  <el-table-column property="price" label="项目价格" width="200" align="center" />
                  <el-table-column property="pages_id" label="所属套餐" show-overflow-tooltip width="240" align="center" />
                  <!-- <el-table-column property="details" label="项目介绍" width="180" align="center">
                    <template #default="scope">
                      <el-tooltip class="box-item" effect="dark" :content="scope.row.parsedDetails" placement="top">
                        <div class="list_word" v-html="scope.row.details"></div>
                      </el-tooltip>
                    </template>
                  </el-table-column> -->
                  <!-- <el-table-column property="attention" label="注意事项" show-overflow-tooltip align="center" /> -->
                  <el-table-column property="status" label="状态" show-overflow-tooltip width="250" align="center">
                    <template #default="scope">
                      <el-switch :value="scope.row.type === 1" @click="affir(scope.row)" />
                    </template>
                    <!-- <template #default="scope">
                      <el-switch v-model="scope.row.status" />
                    </template> -->
                  </el-table-column>
                  <el-table-column property="create_time" label="创建时间" show-overflow-tooltip align="center" />
                  <el-table-column fixed="right" label="操作" width="230" align="center">
                    <template #default="scope">
                      <div style="display: flex; align-items: center; justify-content: center">
                        <el-button type="primary" plain size="small"
                          @click="handleEditTwo(scope.row.id, scope.row)">编辑</el-button>
                        <el-button type="danger" plain size="small"
                          @click="deleteTwo(scope.$index, scope.row)">删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="height: 1vh"></div>
                <div style="display: flex; justify-content: center">
                  <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <!-- 体检类型 -->
          <el-tab-pane label="体检类型">
            <div style="height: 2vh"></div>
            <el-card class="box-card">
              <template #header>
                <div style="font-size: 20px; font-weight: 600">
                  <span>体检类型</span>
                </div>
                <div style="height: 2vh"></div>
                <div style="display: flex; align-items: center">
                  <div style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                    <div class="left">
                      <el-input v-model="input" placeholder="输入类型名称" clearable style="width: 150px" @input="searchData" />
                      <div style="width: 8px"></div>
                      <!-- <el-button style="margin: 10px" type="primary" @click="searchData()">搜索</el-button> -->
                    </div>
                    <div class="right">
                      <el-button style="margin: 10px" type="danger" @click="deleteAllThree">批量删除</el-button>
                      <el-button style="margin: 10px" type="primary" @click="addThree">新增类型</el-button>
                    </div>
                  </div>
                </div>
              </template>
              <div>
                <el-table ref="tableThree" style="width: 100%" stripe
                  :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" v-loading="loading"
                  max-height="50vh">
                  <el-table-column type="selection" width="55" align="center" fixed />
                  <el-table-column label="类型ID" property="id" width="100" align="center" fixed />
                  <el-table-column label="类型名称" property="name" width="120" align="center" fixed />
                  <el-table-column property="num" label="套餐数量" width="180" align="center" />
                  <el-table-column property="package_name" label="包含套餐" align="center">
                    <template #default="scope">
                      <!-- list_word -->
                      <div class="" v-html="scope.row.package_name"></div>
                    </template>
                  </el-table-column>
                  <el-table-column property="create_time" label="创建时间" width="180" show-overflow-tooltip align="center" />
                  <el-table-column fixed="right" label="操作" width="130" align="center">
                    <template #default="scope">
                      <div style="display: flex; align-items: center; justify-content: center">
                        <el-button type="primary" plain size="small"
                          @click="handleEditThree(scope.row.id, scope.row)">编辑</el-button>
                        <el-button type="danger" plain size="small"
                          @click="deleteThree(scope.$index, scope.row)">删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="height: 1vh"></div>
                <div style="display: flex; justify-content: center">
                  <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
                </div>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 弹窗1 -->
      <el-dialog v-model="addVisibleOne" title="体检套餐添加" @close="cancelOne()" width="50%">
        <div class="window">
          <el-form ref="ruleFormRefOne" :model="formOne" :rules="rulesOne" label-width="100px">
            <div class="inpuut_box">
              <div class="box_top">
                <el-form-item label="套餐名称" prop="name">
                  <el-input style="width: 300px" v-model="formOne.name" placeholder="输入套餐名称" />
                </el-form-item>
                <el-form-item label="套餐图片" prop="img">
                  <el-upload class="avatar-uploader" :action="url + 'pc/Fileimg/file'" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :on-error="uploadError">
                    <img v-if="formOne.img" :src="url + formOne.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                      <Plus />
                    </el-icon>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="box_top">
                <el-form-item label="套餐价格" prop="price" style="display: flex; align-items: center">
                  <el-input style="width: 300px" v-model="formOne.price" placeholder="请输入套餐价格" />
                </el-form-item>
                <el-form-item label="套餐类型" prop="package_type">
                  <el-select v-model="formOne.package_type" clearable style="width: 300px" placeholder="请选择类型">
                    <el-option v-for="item in packagesList" :label="item.name" :value="item.id" :key="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="type">
                  <el-switch v-model="formOne.type" />
                </el-form-item>
              </div>
              <div class="box_bottom">
                <el-form-item label="药品介绍" prop="content">
                  <vue-ueditor-wrap style="width: 680px; z-index: 1" v-model="formOne.content"
                    :config="editorConfig"></vue-ueditor-wrap>
                </el-form-item>
              </div>
            </div>
            <div style="direction: rtl;">
              <el-form-item style="width: 100%; display: flex; justify-content: flex-end">
                <el-button type="primary" @click="affirmOne(ruleFormRefOne)">确定</el-button>
                <div style="width: 15px;"></div>
                <el-button @click="cancelOne(ruleFormRefOne)">取消</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-dialog>
      <!-- 弹窗2-->
      <el-dialog v-model="addVisibleTwo" title="体检项目添加" @close="cancelTwo()" width="50%">
        <div class="window">
          <el-form ref="ruleFormRefTwo" :model="formTwo" :rules="rulesTwo" label-width="100px">
            <div class="inpuut_box">
              <div class="box_top">
                <el-form-item label="套餐名称" prop="name">
                  <el-input style="width: 300px" v-model="formTwo.name" placeholder="输入套餐名称" />
                </el-form-item>
                <el-form-item label="套餐价格" prop="price" style="display: flex; align-items: center">
                  <el-input style="width: 300px" v-model="formTwo.price" placeholder="请输入套餐价格" />
                </el-form-item>
              </div>
              <div class="box_top">
                <el-form-item label="状态" prop="type">
                  <el-switch v-model="formTwo.type" />
                </el-form-item>
                <el-form-item label="套餐类型" prop="pages_id">
                  <el-select v-model="formTwo.pages_id" clearable style="width: 300px" placeholder="请选择类型">
                    <el-option v-for="item in packagesList" :label="item.name" :value="item.id" :key="item.id" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_bottom">
                <el-form-item label="注意事项" prop="attention" style="display: flex; align-items: center">
                  <el-input type="textarea" style="width: 680px" v-model="formTwo.attention" placeholder="请输入注意事项" />
                </el-form-item>
              </div>
              <div class="box_bottom">
                <el-form-item label="项目介绍" prop="details">
                  <vue-ueditor-wrap style="width: 680px; z-index: 1" v-model="formTwo.details"
                    :config="editorConfig"></vue-ueditor-wrap>
                </el-form-item>
              </div>
            </div>
            <div style="direction: rtl;">
              <el-form-item style="width: 100%; display: flex; justify-content: flex-end">
                <el-button type="primary" @click="affirmTwo(ruleFormRefTwo)">确定</el-button>
                <div style="width: 15px;"></div>
                <el-button @click="cancelTwo(ruleFormRefTwo)">取消</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-dialog>
      <!-- 弹窗3 -->
      <el-dialog v-model="addVisibleThree" title="体检类型添加" @close="cancelThree()" width="30%">
        <div class="window">
          <el-form ref="ruleFormRefThree" :model="formThree" :rules="rulesThree" label-width="120px">
            <div class="inpuut_box">
              <div class="box_top">
                <el-form-item label="类型名称" prop="name">
                  <el-input style="width: 300px" v-model="formThree.name" placeholder="输入类型名称" />
                </el-form-item>
                <el-form-item label="套餐数量" prop="num">
                  <el-input-number v-model="formThree.num" :min="1" />
                </el-form-item>
              </div>
              <div class="box_top">
                <el-form-item label="状态" prop="status">
                  <el-switch v-model="formThree.status" />
                </el-form-item>
              </div>
            </div>
            <div style="direction: rtl;">
              <el-form-item style="width: 100%; display: flex; justify-content: flex-end">
                <el-button type="primary" @click="affirmThree(ruleFormRefThree)">确定</el-button>
                <div style="width: 15px;"></div>
                <el-button @click="cancelThree(ruleFormRefThree)">取消</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </router-view>
  </div>
</template>
<script setup>
import { ref } from 'vue';
// import { Search, ArrowLeftBold, RefreshRight } from '@element-plus/icons-vue'
import {
  Ttclist,
  Ttitem,
  Tttype,
  requestAddOne,
  requestAddTwo,
  requestAddThree,
  requestDeleteOne,
  requestDeleteTwo,
  requestDeleteThree,
} from '@/api/user';
import { Plus } from '@element-plus/icons-vue';
const input = ref('');
const tableData = ref([]);
const url = ref('https://lxt.jingyi.icu/');
const loading = ref(true);
const vvv = ref(false)
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const packagesList = ref([]);
const ruleFormRefOne = ref(); //表单实例
const ruleFormRefTwo = ref();
const ruleFormRefThree = ref();
const tableOne = ref(); //表格实例
const tableTwo = ref();
const tableThree = ref();
const addVisibleOne = ref(false); //弹窗状态
const addVisibleTwo = ref(false); //弹窗状态
const addVisibleThree = ref(false); //弹窗状态
const lableStatus = ref(0); //弹窗状态
// UEditor配置
const editorConfig = reactive({
  autoHeightEnabled: false,
  initialFrameHeight: 200,
  initialFrameWidth: '100%',
  UEDITOR_HOME_URL: '/ueditor/', // 访问 UEditor 静态资源的根路径publc里面的名称
  serverUrl: '/pc/pc/Fileimg/uderto', // 服务端接⼝
  uploadUrl: '/pc/pc/Fileimg/uderto' + '/kjyl-server-doctor/doctor/file/uploadFile',
  // enableAutoSave: true, // 开启从草稿箱恢复功能需要⼿动设置固定的 editorId，否则组件会默认随机⼀个，如果页⾯刷新，下次渲染的时候 editorId 会重新随机，
});
let data = [];
// 图片上传
const handleAvatarSuccess = (response, uploadFile) => {
  console.log(response);
  console.log(uploadFile);
  if (lableStatus.value == 0) {
    formOne.img = response.data.url;
  } else if (lableStatus.value == 1) {
    formTwo.img = response.data.url;
  } else if (lableStatus.value == 2) {
    formThree.img = response.data.url;
  }
};
const uploadError = (error, uploadFile) => {
  console.log(error);
  console.log(uploadFile);
  if (lableStatus.value == 0) {
    formOne.img = response.data.url;
  } else if (lableStatus.value == 1) {
    formTwo.img = response.data.url;
  } else if (lableStatus.value == 2) {
    formThree.img = response.data.url;
  }
};
// 表单1
const formOne = reactive({
  name: '',
  img: '',
  id: '',
  package_type: '',
  price: '',
  content: '',
  type: true,
});
// 表单2
const formTwo = reactive({
  name: '',
  price: '',
  details: '',
  pages_id: '',
  attention: '',
  type: '',
  id: '',
});
// 表单3
const formThree = reactive({
  name: '',
  num: '',
  type: '',
  id: '',
});
// 表单效验1
const rulesOne = reactive({
  name: [
    {
      required: true,
      message: '请输入套餐名称',
      trigger: 'change',
    },
  ],
  img: [
    {
      required: true,
      message: '请上传图片',
      trigger: 'change',
    },
  ],
  package_type: [
    {
      required: true,
      message: '请选择套餐类型',
      trigger: 'change',
    },
  ],
  price: [
    {
      required: true,
      message: '请输入套餐价格',
      trigger: 'change',
    },
  ],
  content: [
    {
      required: true,
      message: '请输入套餐介绍',
      trigger: 'change',
    },
  ],
});
// 表单效验2
const rulesTwo = reactive({
  name: [
    {
      required: true,
      message: '请输入项目名称',
      trigger: 'change',
    },
  ],
  price: [
    {
      required: true,
      message: '请输入价格',
      trigger: 'change',
    },
  ],
  details: [
    {
      required: true,
      message: '请输入项目介绍',
      trigger: 'change',
    },
  ],
  pages_id: [
    {
      required: true,
      message: '请选择套餐',
      trigger: 'change',
    },
  ],
  attention: [
    {
      required: true,
      message: '请输入注意事项',
      trigger: 'change',
    },
  ],
});
// 表单效验3
const rulesThree = reactive({
  name: [
    {
      required: true,
      message: '请输入项目名称',
      trigger: 'change',
    },
  ],
  num: [
    {
      required: true,
      message: '请输入项目数量',
      trigger: 'change',
    },
  ],
});
payment();
function payment() {
  Ttclist().then((res) => {
    console.log(res);
    data = res.data;

    if (data) {
      loading.value = false;
      const parsedData = data.map(item => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(item.content, 'text/html');
        const textContent = doc.body.innerText;
        return {
          ...item,
          parsedDetails: textContent
        };
      });
      data = parsedData
      searchData();

      console.log(data, '数据');
    }
  });

  Tttype().then((res) => {
    console.log(res);
    packagesList.value = res.data;
  });
}
function tab_value(event) {
  tableData.value = []
  Tttype()
  loading.value = true;

  data = [];
  currentPage4.value = 1;
  if (event) {
    console.log(event.index);
    lableStatus.value = event.index;
  }
  if (lableStatus.value == 1) {
    Ttitem().then((res) => {
      console.log(res);
      data = res.data;

      // searchData();
      if (data) {
        const parsedData = data.map(item => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(item.details, 'text/html');
          const textContent = doc.body.innerText;
          return {
            ...item,
            parsedDetails: textContent
          };
        });
        data = parsedData
        searchData();

        loading.value = false;
      }
    });
  } else if (lableStatus.value == 0) {
    Ttclist().then((res) => {
      console.log(res);
      data = res.data;
      // searchData();
      if (data) {
        const parsedData = data.map(item => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(item.content, 'text/html');
          const textContent = doc.body.innerText;
          return {
            ...item,
            parsedDetails: textContent
          };
        });
        data = parsedData
        searchData();
        loading.value = false;
      }
    });
  } else if (lableStatus.value == 2) {
    Tttype().then((res) => {
      console.log(res);
      data = res.data;
      // searchData();
      if (data) {
        const parsedData = data.map(item => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(item.details, 'text/html');
          const textContent = doc.body.innerText;
          return {
            ...item,
            parsedDetails: textContent
          };
        });
        data = parsedData
        searchData();
        loading.value = false;
      }
    });
  }
}
const affirmSwitch = (data) => {
  console.log(data);
  if (data.type == 1) {
    data.type = 2;
  } else {
    data.type = 1;
  }
  requestAddOne(data).then((res) => {
    console.log(res);
    if (data.id) {
      ElMessage({
        type: 'success',
        message: '修改成功',
      });
    }
    addVisibleThree.value = false;
    clearFormThree();
    tab_value();
  });
};
const affir = (ds) => {
  console.log(ds);
  if (ds.type == 1) {
    ds.type = 2;
  } else {
    ds.type = 1;
  }
  requestAddTwo(ds).then((res) => {
    console.log(res);
    if (ds.id) {
      ElMessage({
        type: 'success',
        message: '修改成功',
      });
    }
    addVisibleThree.value = false;
    clearFormThree();
    tab_value();
  });
}
// 新增1
const addOne = () => {
  formOne.id = '';
  addVisibleOne.value = true;
  clearFormOne();
  ruleFormRefOne.value.clearValidate();
};
// 新增2
const addTwo = () => {
  formTwo.id = '';
  addVisibleTwo.value = true;
  clearFormTwo();
  ruleFormRefTwo.value.clearValidate();
};
// 新增3
const addThree = () => {
  formThree.id = '';
  addVisibleThree.value = true;
  clearFormThree();
  ruleFormRefThree.value.clearValidate();
};
// 清空表单1
const clearFormOne = () => {
  formOne.id = '';
  formOne.name = '';
  formOne.img = '';
  formOne.package_type = '';
  formOne.price = '';
  formOne.content = '';
  formOne.status = true;
};
// 清空表单2
const clearFormTwo = () => {
  formTwo.id = '';
  formTwo.name = '';
  formTwo.price = '';
  formTwo.details = '';
  formTwo.pages_id = '';
  formTwo.attention = '';
  formTwo.status = true;
};
// 清空表单3
const clearFormThree = () => {
  formThree.name = '';
  formThree.num = 1;
  formTwo.status = true;
};
// 取消
const cancelOne = (formEl) => {
  clearFormOne();
  addVisibleOne.value = false;
  formEl.clearValidate();
};
// 取消2
const cancelTwo = (formEl) => {
  clearFormTwo();
  addVisibleTwo.value = false;
  formEl.clearValidate();
};
// 取消3
const cancelThree = (formEl) => {
  clearFormThree();
  addVisibleThree.value = false;
  formEl.clearValidate();
};
// 确认新增/编辑1
const affirmOne = async (formEl) => {
  console.log(formOne);
  if (formOne.type == true) {
    formOne.type = 1;
  } else {
    formOne.type = 2;
  }
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      requestAddOne(formOne).then((res) => {
        console.log(res);
        if (formOne.id) {
          ElMessage({
            type: 'success',
            message: '编辑成功',
          });
        } else {
          ElMessage({
            type: 'success',
            message: '添加成功',
          });
        }
        addVisibleOne.value = false;
        clearFormOne();
        tab_value();
      });
      console.log('submit!');
    } else {
      console.log('error submit!', fields);
    }
  });
};
// 确认新增/编辑2
const affirmTwo = async (formEl) => {
  console.log(formTwo);
  if (formTwo.type) {
    formTwo.type = 1;
  } else {
    formTwo.type = 2;
  }
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      requestAddTwo(formTwo).then((res) => {
        console.log(res);
        if (formTwo.id) {
          ElMessage({
            type: 'success',
            message: '编辑成功',
          });
        } else {
          ElMessage({
            type: 'success',
            message: '添加成功',
          });
        }
        addVisibleTwo.value = false;
        clearFormTwo();
        tab_value();
      });
      console.log('submit!');
    } else {
      console.log('error submit!', fields);
    }
  });
};
// 确认新增/编辑3
const affirmThree = async (formEl) => {
  console.log(formThree);
  if (formThree.status) {
    formThree.status = 1;
  } else {
    formThree.status = 2;
  }
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      requestAddThree(formThree).then((res) => {
        console.log(res);
        if (formThree.id) {
          ElMessage({
            type: 'success',
            message: '编辑成功',
          });
        } else {
          ElMessage({
            type: 'success',
            message: '添加成功',
          });
        }
        addVisibleThree.value = false;
        clearFormThree();
        tab_value();
      });
      console.log('submit!');
    } else {
      console.log('error submit!', fields);
    }
  });
};
// 删除1
const deleteOne = (index, row) => {
  console.log(index, row);
  ElMessageBox.confirm('是否确认删除?', '删除药品', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then((res) => {
      console.log(res);

      requestDeleteOne({
        id: row.id,
      }).then((result) => {
        console.log(result);
        if (result.code == 0) {
          ElMessage({
            type: 'danger',
            message: result.msg,
          });
        } else if (result.code == 1) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          tab_value();
        }
      });
    })
    .catch((res) => {
      console.log(res);
      ElMessage({
        type: 'info',
        message: '取消删除',
      });
    });
};
// 删除2
const deleteTwo = (index, row) => {
  console.log(index, row);
  ElMessageBox.confirm('是否确认删除?', '删除药品', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then((res) => {
      console.log(res);

      requestDeleteTwo({
        id: row.id,
      }).then((result) => {
        console.log(result);
        if (result.code == 0) {
          ElMessage({
            type: 'danger',
            message: result.msg,
          });
        } else if (result.code == 1) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          tab_value();
        }
      });
    })
    .catch((res) => {
      console.log(res);
      ElMessage({
        type: 'info',
        message: '取消删除',
      });
    });
};
// 删除3
const deleteThree = (index, row) => {
  console.log(index, row);
  ElMessageBox.confirm('是否确认删除?', '删除药品', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then((res) => {
      console.log(res);

      requestDeleteThree({
        id: row.id,
      }).then((result) => {
        console.log(result);
        if (result.code == 0) {
          ElMessage({
            type: 'danger',
            message: result.msg,
          });
        } else if (result.code == 1) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          tab_value();
        }
      });
    })
    .catch((res) => {
      console.log(res);
      ElMessage({
        type: 'info',
        message: '取消删除',
      });
    });
};
// 编辑1
const handleEditOne = (index, row) => {
  formOne.id = row.id;
  formOne.name = row.name;
  formOne.img = row.img;
  formOne.package_type = row.package_type;
  formOne.price = row.price;
  formOne.content = row.content;
  formOne.type = row.type == 1 ? true : false;
  addVisibleOne.value = true;
  console.log(formOne);
  console.log(index, row);
};
// 编辑2
const handleEditTwo = (index, row) => {
  formTwo.id = row.id;
  formTwo.name = row.name;
  formTwo.price = row.price;
  formTwo.details = row.details;
  formTwo.pages_id = row.pages_id;
  formTwo.attention = row.attention;
  formTwo.type = row.type == 1 ? true : false;
  addVisibleTwo.value = true;
  console.log(formTwo);
  console.log(index, row);
};
// 编辑3
const handleEditThree = (index, row) => {
  formThree.id = row.id;
  formThree.name = row.name;
  formThree.num = row.num;
  formThree.status = row.status == 1 ? true : false;
  addVisibleThree.value = true;
  console.log(formThree);
  console.log(index, row);
};
// 批量删除1
const deleteAllOne = () => {
  let arr = tableOne.value.getSelectionRows();
  if (arr.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选中需要删除的数据',
    });
  } else {
    ElMessageBox.confirm('是否确认删除?', '删除药品', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then((res) => {
        console.log(res);
        let arr = tableOne.value.getSelectionRows();
        let arrs = [];
        console.log(arr);
        // 构造一个 Promise 数组，每个 Promise 表示一条记录的删除操作
        const promises = arr.map((element) => {
          return requestDeleteOne({ id: element.id });
        });
        // 使用 Promise.all() 处理 Promise 数组，一旦其中有一个Promise被拒绝（即删除失败），就会执行catch()方法，
        // 否则，如果所有的Promise都得到了解决（即删除成功），就会执行then()方法。
        Promise.all(promises)
          .then((results) => {
            console.log(results);
            results.forEach((result) => {
              if (result.code == 0) {
                console.log(1);
                ElMessage({
                  type: 'danger',
                  message: result.msg,
                });
              } else if (result.code == 1) {
                arrs.push(result.data);
              }
            });
            if (arrs.length == arr.length) {
              console.log(2);
              ElMessage({
                type: 'success',
                message: '删除成功',
              });
            } else {
              console.log(3);
              ElMessage({
                type: 'warning',
                message: '删除失败，请重试',
              });
            }
            console.log(4);
            tab_value();
          })
          .catch((error) => {
            console.log(error);
            ElMessage({
              type: 'warning',
              message: '删除失败，请重试',
            });
          });
      })
      .catch((res) => {
        console.log(res);
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
      });
  }
};
// const deleteAllOne = () => {
//   ElMessageBox.confirm('是否确认删除?', '删除药品', {
//     confirmButtonText: '确认',
//     cancelButtonText: '取消',
//     type: 'warning',
//   })
//     .then((res) => {

//     })
//     .catch((res) => {
//       console.log(res);
//       ElMessage({
//         type: 'info',
//         message: '取消删除',
//       });
//     });
// };
// 批量删除2
const deleteAllTwo = () => {
  let arr = tableTwo.value.getSelectionRows();
  if (arr.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选中需要删除的数据',
    });
  } else {
    ElMessageBox.confirm('是否确认删除?', '删除药品', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then((res) => {
        console.log(res);
        let arr = tableTwo.value.getSelectionRows();
        let arrs = [];
        console.log(arr);
        // 构造一个 Promise 数组，每个 Promise 表示一条记录的删除操作
        const promises = arr.map((element) => {
          return requestDeleteTwo({ id: element.id });
        });
        // 使用 Promise.all() 处理 Promise 数组，一旦其中有一个Promise被拒绝（即删除失败），就会执行catch()方法，
        // 否则，如果所有的Promise都得到了解决（即删除成功），就会执行then()方法。
        Promise.all(promises)
          .then((results) => {
            console.log(results);
            results.forEach((result) => {
              if (result.code == 0) {
                ElMessage({
                  type: 'danger',
                  message: result.msg,
                });
              } else if (result.code == 1) {
                arrs.push(result.data);
              }
            });
            if (arrs.length == arr.length) {
              ElMessage({
                type: 'success',
                message: '删除成功',
              });
            } else {
              ElMessage({
                type: 'warning',
                message: '删除失败，请重试',
              });
            }
            tab_value();
          })
          .catch((error) => {
            console.log(error);
            ElMessage({
              type: 'warning',
              message: '删除失败，请重试',
            });
          });
      })
      .catch((res) => {
        console.log(res);
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
      });
  }
};
// const deleteAllTwo = () => {
//   ElMessageBox.confirm('是否确认删除?', '删除药品', {
//     confirmButtonText: '确认',
//     cancelButtonText: '取消',
//     type: 'warning',
//   })
//     .then((res) => {

//     })
//     .catch((res) => {
//       console.log(res);
//       ElMessage({
//         type: 'info',
//         message: '取消删除',
//       });
//     });
// };
// 批量删除3
const deleteAllThree = () => {
  let arr = tableThree.value.getSelectionRows();
  if (arr.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选中需要删除的数据',
    });
  } else {
    ElMessageBox.confirm('是否确认删除?', '删除药品', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then((res) => {
        console.log(res);
        let arr = tableThree.value.getSelectionRows();
        let arrs = [];
        console.log(arr);
        // 构造一个 Promise 数组，每个 Promise 表示一条记录的删除操作
        const promises = arr.map((element) => {
          return requestDeleteThree({ id: element.id });
        });
        // 使用 Promise.all() 处理 Promise 数组，一旦其中有一个Promise被拒绝（即删除失败），就会执行catch()方法，
        // 否则，如果所有的Promise都得到了解决（即删除成功），就会执行then()方法。
        Promise.all(promises)
          .then((results) => {
            console.log(results);
            results.forEach((result) => {
              if (result.code == 0) {
                ElMessage({
                  type: 'danger',
                  message: result.msg,
                });
              } else if (result.code == 1) {
                arrs.push(result.data);
              }
            });
            if (arrs.length == arr.length) {
              ElMessage({
                type: 'success',
                message: '删除成功',
              });
            } else {
              ElMessage({
                type: 'warning',
                message: '删除失败，请重试',
              });
            }
            tab_value();
          })
          .catch((error) => {
            console.log(error);
            ElMessage({
              type: 'warning',
              message: '删除失败，请重试',
            });
          });
      })
      .catch((res) => {
        console.log(res);
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
      });
  }
};
// const deleteAllThree = () => {
//   ElMessageBox.confirm('是否确认删除?', '删除药品', {
//     confirmButtonText: '确认',
//     cancelButtonText: '取消',
//     type: 'warning',
//   })
//     .then((res) => {

//     })
//     .catch((res) => {
//       console.log(res);
//       ElMessage({
//         type: 'info',
//         message: '取消删除',
//       });
//     });
// };
// 搜索
const searchData = () => {

  tableData.value = data.filter(function (item) {
    if (item.name.indexOf(input.value) > -1) {
      return item;
    }
  });
  console.log(tableData.value);
};
</script>
<style lang="scss" scoped>
.left {
  max-width: 650px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.right {
  max-width: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.window {
  width: 100%;
  // overflow-x: scroll;
  padding: 10px;
  background-color: white;
}

.hint {
  margin-left: 10px;
  color: #a6a6a6;
  font-size: 14px;
}

.head_img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}

.lable {
  width: 100%;
  line-height: 1;
  border-radius: 50px;
  padding: 10px;
}

.list_word {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inpuut_box {
  width: 800px;
  // display: flex;
  // flex-wrap: wrap;
}

.box_top {
  width: 400px;
}

.box_bottom {
  width: 800px;
}

//上传
.avatar-uploader {
  border: 1px dashed var(--el-border-color) !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

//上传
.form_word {
  margin-right: 20px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.list_word {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}
</style>
